<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.4.5/dist/css/layui.css">

	<script src="../../libs/jquery-easyui-1.8.5/jquery.min.js"></script>
	<script src="../../libs/layui/layui-2.4.5/dist/layui.js"></script>
	<script src="./js/compoments.js"></script>
	<style>


	</style>
</head>

<body style="margin: 50px;">

	<div>
		<table id="table1"></table>
	</div>


	<script>

		
		layui.use('table', function () {
			var table = layui.table;
			var $ = layui.jquery;


			var tableId = "table1";
			// console.log(res);
			//合并单元格
			table.render({
				elem: '#' + tableId
				, url: '../assets/table/data4.json' //数据接口
				// , data: res
				, cols: [
					[ //标题栏
						, { field: 'unit', title: '单位', width: 100, rowspan: 2, align: "center" } //rowspan即纵向跨越的单元格数
						, { field: 'type', title: '型号', width: 100, rowspan: 2, align: "center" }
						, { field: 'num', title: '现有人数', width: 100, rowspan: 2, align: "center" }
						, { field: 'isManager', title: '管理/人员', colspan: 2, align: "center" } //colspan即横跨的单元格数，这种情况下不用设置field和width
						, { field: 'age', title: '年龄', width: 100, rowspan: 2, align: "center" }
						, { field: 'degree', title: '文化程度', width: 100, rowspan: 2, align: "center" }
						, { field: 'ageLayer', title: '年龄结构', colspan: 5, align: "center" }
						, { field: 'degreeLayer', title: '文化层次', colspan: 6, align: "center" }
					], [
						{ field: 'username', title: '姓名', width: 100, align: "center" }
						, { field: 'work', title: '职务', width: 100, align: "center" }
						, { field: 'lte50', title: '>=50', width: 80 }
						, { field: 'in40', title: '40-49', width: 80 }
						, { field: 'in30', title: '30-39', width: 80 }
						, { field: 'in20', title: '<=29', width: 80 }
						, { field: 'average', title: '平均', width: 80 }
						, { field: 'xx', title: '小学', width: 80 }
						, { field: 'cz', title: '初中', width: 80 }
						, { field: 'gz', title: '高中', width: 80 }
						, { field: 'zz', title: '中专', width: 80 }
						, { field: 'dz', title: '大专', width: 80 }
						, { field: 'bk', title: '本科', width: 80 }


					]
				]

				
				, parseData: function (res) { //这个函数用于处理 接收数据和规定格式不符合时，可以在这里进行数据转换
					res.data.push({
						"id": 92, "unit": "总计","degree":" " ,"mergeRows":1

					});
					res.data.push({
						"id": 92, "unit": "比例","degree":" " ,"mergeRows":2
					});
					res.data.push({
						"id": 93, "unit": "备注","degree":" ", "type": "共计59人，其中管理干部4人，工人55人，平均年龄为51.76。" ,"mergeRows":2
					});
					res.count = res.data.length;
					console.log(res);
					return {
						"code": res.code, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.count, //解析数据长度
						"data": res.data //解析数据列表
					};
				}

				, done: function (res, curr, count) {
					 		//基础数据（不包括最后三行）：计算当地机务段内的救援列车分类，这决定垂直合并的行数
                            // 从 第 0行开始检查，
                            if (count <= 3) {
                                return;
                            }

                            var rows = res.data;
                            //获取第一个垂直合并数

                            //c0(第1列) 合并所有行
                            JxLayuiUtil.mergeRowsVertically(tableId, 0, 0, count - 4);

                            //先找到第一列标题
                            var title00 = JxLayuiUtil.findTitleCell4JQuery(tableId,0,0);
                            //对第一列 第一行的单元格必须做特殊处理
                            var cell00= JxLayuiUtil.findDataCell4JQuery(tableId,0,0);

							//显示的第1列恰好如图所示（本列需要全部合并），需要加入这个代码，不然合并样式会有问题
                            var dataKey = title00.attr("data-key");
                            cell00.attr("data-key",dataKey);
                            cell00.find("div").removeClass("laytable-cell-undefined").addClass("laytable-cell-"+dataKey);

							//这个合并列函数，需要借助每行数据中包含 mergeRows 字段来控制合并的行数，如果没有这个属性，则合并忽略
                            //c1，c2，c7-c17
                            JxLayuiUtil.mergeRowsByMergeRows(tableId,[1, 2, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],res.data,count - 3)


							//自动检测指定列 的值，如果相同，就合并。（存在bug：如果与合并行混合使用，样式会乱，请规避
							JxLayuiUtil.mergeRowsByColName(tableId,6,'degree',res.data,res.data.length-4)

                            //汇总数据（最后三行）
                            if (count >= 3) {
                                //倒数第三行(合并水平方向的 两个单元格(col=3  and col=4))
                                JxLayuiUtil.mergeRowsHorizontally(tableId, count - 3, 3, 4);

                                //倒数第二行(合并水平方向的 两个单元格(col=3  and col=4))
                                JxLayuiUtil.mergeRowsHorizontally(tableId, count - 2, 3, 4);

                                //倒数第一行(处理col=0，其他全部合并)
                                JxLayuiUtil.mergeRowsHorizontally(tableId, count - 1, 1);

                                // //修改最后一行 的合并的tr->td->div{width:1000px}
                                JxLayuiUtil.findDataCell4JQuery(tableId, count - 1, 1).find("div").css({width: "100%","text-align": "left" });

                            }
							
							//如果使用前端插件导出 html 为Excel 时，需要将 合并样式时的 隐藏的 html剔除掉，不然不会影响导出效果。
                            JxLayuiUtil.clearHideCellClassAfterMergeTable();
					
				}

			});





		});



	</script>





</body>

</html>